<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
	<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id" v-bind:post="post"
     
       v-on:welcom="postFontSize+=$event">
   
   
    </blog-post>
  </div>
</div>

<script type="text/javascript">
	Vue.component('blog-post', {
  props: ['post'];
  template: '<div> <h3>{{ post.title }}</h3> <button v-on:click="$emit('welcom',2)"> Enlarge text </button> </div>'
  
	})

	
	new Vue({
  el: '#blog-posts-events-demo',
  data: {
   posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  },
})
	
	
	
</script>
		
		
	</body>
</html>-->
